<template>
	<uni-grid :column="3">
		<uni-grid-item v-for="(item ,index) in functionList" :index="index" :key="item.label" @tap="toPage(item)">
			<view class="item">
				<uni-badge v-if="item.badge" :text="item.badge" :type="item.badgeType" :max-num="99999"
					:offset="[-20,-10]" absolute="rightTop">
					<cl-icon :type="item.iconType" :color="item.iconColor" :size="item.iconSize"></cl-icon>
				</uni-badge>
				<cl-icon v-else type="scan" size="28" color="#797979"></cl-icon>
				<text class="text">{{item.label}}</text>
			</view>
		</uni-grid-item>
	</uni-grid>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const functionList = ref([
		{
			label: '学习词库',
			badge: 1234,
			badgeType: 'warning',
			iconType: 'starhalf',
			iconColor: '#ae81ff',
			iconSize: '35',
			toUrl: ''
		}, {
			label: '复习计划',
			badge: 1234,
			badgeType: 'warning',
			iconType: 'icon-xunhuan01',
			iconColor: '#f1ad54',
			iconSize: '28',
			toUrl: ''
		}, {
			label: '我的词库',
			badge: 1234,
			badgeType: 'success',
			iconType: 'icon-shoucang',
			iconColor: '#797979',
			iconSize: '28',
			toUrl: ''
		}, {
			label: '我要导入',
			iconSize: '22',
			toUrl: '/pages/index/components/importFile/importFile'
		}
	])
	function toPage(item) {
		uni.navigateTo({
			url: item.toUrl
		})
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
</style>